﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/reset.css">
    <link rel="stylesheet" href="../static/css/report1.css">
    <link rel="stylesheet" href="../static/css/moniter.css">
    <style type="text/css">
		html{height:100%}
		body{height:100%;margin:0px;padding:0px}
		#controller{width:100%; border-bottom:3px outset; height:30px; filter:alpha(Opacity=100); -moz-opacity:1; opacity:1; z-index:10000; background-color:lightblue;}
		#container{height:100%}
		.table tbody td:last-child {
		text-align: left;
		padding-right: 8px!important;
		}
		#pop-bottom {
		background: rgba(51, 51, 51, 0.8);
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		display: none;
		position: absolute;
		z-index: 4;
		}

		.new-count {
		position: absolute;
		left:7%;
		top: 2%;
		width: 86%;
		height:90%;
		overflow-y:auto;
		z-index: 53;
		border: 1px solid rgb(204, 204, 204);
		}
		.fix-close {
		top: 10px;
		right: 16px;
		position: absolute;
		}
		.tit-top {
		background: rgb(0, 163, 68);
		color: rgb(255, 255, 255);
		}
        .height40 {
            min-height: 40%;
        }
.displayN{display:none;}
	</style>
    <#--<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ehpGZzL5wORts5X41dL6KI7COkqlzaEC"></script>-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5RGbewMHKIH5AlNZUdC6lmrEUNqG9evX"></script>
    <#--<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=D2b4558ebed15e52558c6a766c35ee73"></script>-->
		<script type="text/javascript" src="../static/js/vis.js"></script>

    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>
    <script src="../static/js/moniter.js"></script>
    <script src="../static/js/task.js"></script>
    <script src="../static/js/loadingRate/loadingPage.js"></script>

    <title>容智车联车厢管家</title>
		<script type="text/javascript">
			var data = null;
			var graph = null;
			var dataS = null;

			//车厢高度变量
            var carHeight = "";

			var messid = "";

			function custom(x, y) {
			return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
			}

			// Called when the Visualization API is loaded.
			function drawVisualization(dataS) {
			var style = document.getElementById('style').value;
			var showPerspective = document.getElementById('perspective').checked;
			var xBarWidth = parseFloat(document.getElementById('xBarWidth').value) || undefined;
			var yBarWidth = parseFloat(document.getElementById('yBarWidth').value) || undefined;
			var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;

			// Create and populate a data table.
			data = dataS;

			// create some nice looking data with sin/cos
//			var steps = 5;  // number of datapoints will be steps*steps
//			var axisMax = 10;
//			var axisStep = axisMax / steps;
//			for (var x = 0; x <= axisMax; x+=axisStep) {
//			for (var y = 0; y <= axisMax; y+=axisStep) {
//			var z = custom(x,y);
//			if (withValue) {
//			var value = (y - x);
//			data.push({x:x, y:y, z: z, style:value});
//			}
//			else {
//			data.push({x:x, y:y, z: z});
//			}
//			}
//			}

			//data = [{0,0,38},{0,1,20},{0,2,32},{0,3,42},{0,4,2052},{0,5,2144},{0,6,2194},{0,7,2161},{0,8,2158},{0,9,2133},{0,10,2138},{0,11,2137},{0,12,2214},{0,13,2087},{0,14,2072},{0,15,2082},{0,16,2098},{0,17,2140},{1,0,33},{1,1,34},{1,2,35},{1,3,26},{1,4,2194},{1,5,2122},{1,6,2075},{1,7,2076},{1,8,2086},{1,9,2078},{1,10,2107},{1,11,2129},{1,12,2102},{1,13,2183},{1,14,2154},{1,15,2205},{1,16,2148},{1,17,2009},{2,0,30},{2,1,30},{2,2,32},{2,3,50},{2,4,1193},{2,5,1402},{2,6,1443},{2,7,2077},{2,8,2080},{2,9,2093},{2,10,2095},{2,11,2105},{2,12,2105},{2,13,2178},{2,14,2184},{2,15,2179},{2,16,2034},{2,17,2071}];
//			data=[{x:0,y:0,z:38},{x:0,y:1,z:20},{x:0,y:2,z:32},{x:0,y:3,z:42},{x:0,y:4,z:2052},{x:0,y:5,z:2144},{x:0,y:6,z:2194},{x:0,y:7,z:2161},{x:0,y:8,z:2158},{x:0,y:9,z:2133},{x:0,y:10,z:2138},{x:0,y:11,z:2137},{x:0,y:12,z:2214},{x:0,y:13,z:2087},{x:0,y:14,z:2072},{x:0,y:15,z:2082},{x:0,y:16,z:2098},{x:0,y:17,z:2140},{x:1,y:0,z:33},{x:1,y:1,z:34},{x:1,y:2,z:35},{x:1,y:3,z:26},{x:1,y:4,z:2194},{x:1,y:5,z:2122},{x:1,y:6,z:2075},{x:1,y:7,z:2076},{x:1,y:8,z:2086},{x:1,y:9,z:2078},{x:1,y:10,z:2107},{x:1,y:11,z:2129},{x:1,y:12,z:2102},{x:1,y:13,z:2183},{x:1,y:14,z:2154},{x:1,y:15,z:2205},{x:1,y:16,z:2148},{x:1,y:17,z:2009},{x:2,y:0,z:30},{x:2,y:1,z:30},{x:2,y:2,z:32},{x:2,y:3,z:50},{x:2,y:4,z:1193},{x:2,y:5,z:1402},{x:2,y:6,z:1443},{x:2,y:7,z:2077},{x:2,y:8,z:2080},{x:2,y:9,z:2093},{x:2,y:10,z:2095},{x:2,y:11,z:2105},{x:2,y:12,z:2105},{x:2,y:13,z:2178},{x:2,y:14,z:2184},{x:2,y:15,z:2179},{x:2,y:16,z:2034},{x:2,y:17,z:2071}];
//                alert(data.toString());

			// specify options
                alert(carHeight);
			var options = {
                width:  '800px',
                height: '450px',
                style: style,
                xBarWidth: xBarWidth,
                yBarWidth: yBarWidth,
                showPerspective: showPerspective,
                showGrid: true,
                showShadow: false,
                keepAspectRatio: true,
                verticalRatio: 0.25,
                zMax:carHeight,
                xLabel:'列',
                yLabel:'行',
                zLabel:'货物高度(cm)'
			};

			var camera = graph ? graph.getCameraPosition() : null;

			// create our graph
			var container = document.getElementById('mygraph');
//			alert(messid);

            //通过messionId查询任务，填充装载率
            //ajax start
            /*$.ajax({
                type: "GET",
                url: "../mession/getMessionRateByMessionId",
                dataType : 'json',
                data:{
                    messionId:messid
                },
                success: function(data){
//                        alert(data.dataString);
                    dataS = data.dataString;
                    drawVisualization(dataS);
                }
            });*/
            //ajax end
//			alert(dataS);
			graph = new vis.Graph3d(container, dataS, options);

			if (camera) graph.setCameraPosition(camera); // restore camera position

			document.getElementById('style').onchange = drawVisualization;
			document.getElementById('perspective').onchange = drawVisualization;
			document.getElementById('xBarWidth').onchange = drawVisualization;
			document.getElementById('yBarWidth').onchange = drawVisualization;
			}

           /* function uuid() {
                var s = [];
                var hexDigits = "0123456789abcdef";
                for(var i = 0; i < 36; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                }
                s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
                s[8] = s[13] = s[18] = s[23] = "-";

                var uuid = s.join("");
                return uuid;
            }*/

            function clicktd(messionId) {
                messid = messionId;
//			alert(cNumber);

                //通过messionId查询任务，填充装载率
                //ajax start
                $.ajax({
                    type: "GET",
                    url: "../mession/getMessionRateByMessionId",
                    dataType : 'json',
                    data:{
                        messionId:messionId
                    },
                    success: function(data){
//                        alert(data.dataString);
                        dataS = data.dataString;
                        drawVisualization(dataS);
                    }
                });
                //ajax end

                $('#pop-bottom').fadeIn(); //弹出新建信息页面

                $('#new-count').fadeIn();

            }

            $(function () {


                $('#style').change(function(){
                    var sss = $('#style option:selected').val();
//                    alert(sss);
                    //通过messionId查询任务，填充装载率
                    //ajax start
                    $.ajax({
                        type: "GET",
                        url: "../mession/getMessionRateByMessionId",
                        dataType : 'json',
                        data:{
                            messionId:messid
                        },
                        success: function(data){
//                        alert(data.dataString);
                            dataS = data.dataString;
                            carHeight = data.carHeight;
                            drawVisualization(dataS);
                        }
                    });
                    //ajax end

                    $('#pop-bottom').fadeIn(); //弹出新建信息页面

                    $('#new-count').fadeIn();
                });


                //关闭修改/查看弹窗
                $(document).on("click",".closeWindows",function(){
//            $('#new-count').on('click', '.close', function() {
//                $(this).parents('#new-count').hide();
                    $('#new-count').css('display', 'none');
                    $('#pop-bottom').css('display', 'none');
                });

                /**
                 * 搜索触发事件
                 */
                $("#searchStation").keyup(function(){
                    var text = $(this).val();
//            alert(text);
                    $.ajax({
                        type: "POST",
                        url: "../station/getStationByKey",
                        dataType:'json',
                        data:{
                            "text":text
                        },
                        success:function(data){
                            if(data.status == "success")
                            {

                                var str = data.stationList;
                                $('#vehi-list').html(str);
                            }
                            else {
//                        alert(1111);
                            }
                        }
                    });
                });
            });

		</script>
</head>

<body class="odd-body pos-re">
<input type="hidden" id="lat" value="${lat!""}">
<input type="hidden" id="lng" value="${lng!""}">
<div class="container-fluid" style="padding:0">
    <div class="row-fluid">
        <div class="span3 bg-white pad-10 bdradius"  style="width: 20%">
<div class="height100 pos-re">
            <div class="search-lj" style="overflow:hidden;" >
                <form class="navbar-search">
                    <input type="text" class="search-query input-medium m-l-25" placeholder="搜索中转站" id="searchStation"/>
                </form>
            </div>
<div class="ul-lj">
            <ul id="vehi-list">
            <#list stationList as station>
                <li class="p-bt-10 b-botom pos-re" value="${station.id!""}">
					<a href="javascript:void(0);" title='${station.name!""}（${station.carCount!""}辆）'>
						<span class="txt-limit getCars" name="${station.id!""}">${station.name!""}（${station.carCount!""}辆）</span>
					</a>
                    <ul class="carList">

                    </ul>
                </li>
            </#list>
            </ul>
</div>
</div>
        </div>
        <!--------------------------以下是右边路况图---------------------------------->
        <div class="span9 lijia-div" >
<div class="row-fluid height60 pos-re">
	<div class="mapdiv height100">
            <div class="span12 map-zone ov-h bdradius bg-white pos-re" id="allmap" style="background: url(../static/images/map.png) no-repeat center;background-size:100% 99.9%;">
                <#--<div id="controller" align="center">
                    <input id="follow" type="checkbox"><span style="font-size:12px;">画面跟随</span></input>
                    <input id="play" type="button" value="播放" onclick="play();" disabled />
                    <input id="pause" type="button" value="暂停" onclick="pause();" disabled />
                    <input id="reset" type="button" value="重置" onclick="reset()" disabled />
                </div>-->
                <div id="container"></div>
            </div>
	</div>
</div>
            <div class="row-fluid  height40 bg-white">
                <div class="span12 pad-10 bdradius">
                <div class="pos-re tabChange">
                    <h3 class="b-botom">车辆装载率信息</h3>
                    <div class="row pos-ab3 ov-h bdradius" style="top:0;cursor: pointer;">
                        <span class="span6 twin-bg t-c">当周</span>
                        <span class="span6 t-c">当月</span>
                    </div>
                    </div>
                    <table class="table table-striped" style="
  width: calc(100% - 1em)
  ">
                        <colgroup>
                            <col style="width: 18%;">

                            <col style="width: 14%;">

                            <col style="width: 14%;">

                            <col style="width: 14%;">

                            <col style="width: 13%;">

                            <col style="width: 14%;">

                            <col style="width: 13%;">

                        </colgroup>
                        <thead class="font-bold">
                        <tr>
                            <td>任务单编号</td>
                            <td>始发地</td>
                            <td>目的地</td>
                            <td>装载率</td>
                            <td>货物体积</td>
                            <td>装车用时</td>
                            <td>卸车用时</td></tr>
                        </thead>
                    </table>
                    <div class="tbody-div" style="
height: 100px;
overflow-y: scroll;
display: block;
width: 100%;
flex-grow: 1;
">
                        <table class="table table-striped">
                            <colgroup>
                                <col style="width: 18%;">

                                <col style="width: 14%;">

                                <col style="width: 14%;">

                                <col style="width: 14%;">

                                <col style="width: 13%;">

                                <col style="width: 14%;">

                                <col style="width: 13%;">

                            </colgroup>
                            <tbody id="messionString" style="
    width: 100%;
    ">

                            </tbody>
                        </table>
                    </div>
<#--<table class="table table-striped displayN">
                        <thead class='font-bold'>
                            <td>任务单编号</td>
                            <td>始发地</td>
                            <td>目的地</td>
                            <td onclick="clicktd1()">装载率</td>
                            <td>货物体积</td>
                            <td>装车用时</td>
                            <td>卸车用时</td>
                        </thead>
                    </table>-->
                </div>
            </div>
        </div>
    </div>
</div>


<!-------查看/修改的模态窗--------->
<div id="pop-bottom">
</div>

<!--以下是新建信息弹出页面-->
	<div class="container ov-h bdbox bg-white p-b-20 pos-re new-count dis-no" id="new-count" >
    <h3 class="text-center p-r-10 pos-re" style="background-color: #777777!important;color: white">装载率详情</br>
		<button type="button" class="close fix-close p-t-10 p-l-10 closeWindows" data-dismiss="modal" aria-hidden="true">
			×
		</button>
        
    </h3>
    <div class="row-fluid pad-10 bdbox">
		<div >
            <div id="mygraph" style="margin-left: 130px;"></div>
			<p>
				<label for="style">
					Style:
					<select id="style">
						<option class="barStyle" value="bar">bar</option>
						<#--<option value="bar-color">bar-color</option>
						<option value="bar-size">bar-size</option>-->

						<option class="barStyle" value="dot">dot</option>
						<#--<option value="dot-line">dot-line</option>
						<option value="dot-color">dot-color</option>
						<option value="dot-size">dot-size</option>-->

						<option class="barStyle" value="grid">grid</option>
						<option class="barStyle" value="line">line</option>
						<option class="barStyle" value="surface">surface</option>
					</select>
                    <br>
                    <span style="color: red;"></span>
				</label>
			</p>

			<p style="display: none;">
				<label for="perspective">
					<input type="checkbox" id="perspective" checked=""> Show perspective
  </label>
			</p>

			<p style="display: none">
				<label for="xBarWidth">
					Bar width X:
					<input type="text" id="xBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color")
  </label>
			</p>
			<p style="display: none">
				<label for="yBarWidth">
					Bar width Y:
					<input type="text" id="yBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color")
  </label>
			</p>



			<div id="info"></div>
		</div>
    </div>
    
</div>

	<script>
$('.tabChange').on('click','span',function(){
$(this).addClass('twin-bg');
$(this).siblings('span').removeClass('twin-bg');
var index = $(this).index();
var table = $('.tabChange').siblings('table:eq('+index +')');

table.css('display','table');
table.siblings('table').css('display','none');
})
        // 百度地图API功能
        var map = new BMap.Map("container");
        var point = new BMap.Point(116.331398,39.897445);
        map.centerAndZoom(point,12);

        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                var mk = new BMap.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
//                alert('您的位置：'+r.point.lng+','+r.point.lat);
            }
            else {
                alert('failed'+this.getStatus());
            }
        },{enableHighAccuracy: true});

	</script>
</body>
</html>
